<script setup lang="ts">
import { reactive, ref } from 'vue'
import NoData from '@/components/NoData/NoData.vue'
import MyList from '@/pages/my/components/MyList.vue'
//用于接收父组件传递来的数据
let data = reactive([
  {
    id: 1,
    name: '张三',
    sex: 'F',
    age: 18,
    height: 170,
    address: '北京',
    time: '1天前',
  },
  {
    id: 2,
    name: '张三',
    sex: 'M',
    age: 18,
    height: 170,
    address: '北京',
    time: '1天前',
  },
])
</script>
<template>
  <view class="appointment">
    <!-- 头部选项栏 -->
    <view class="mentNav">
      <view class="navItem">
        <view class="btn"> <text>0</text>次 </view>
        <view class="btnText">已完成</view>
      </view>
      <view class="navItem">
        <view class="btn btnCenter"> <text>0</text>次 </view>
        <view class="btnText">进行中</view>
      </view>
      <view class="navItem">
        <view class="btn btnRight"> <text>0</text>次 </view>
        <view class="btnText">暂停中</view>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="main">
      <template v-if="false"> </template>
      <NoData v-else />
    </view>
  </view>
</template>

<style scoped lang="scss">
.appointment {
  width: 100vw;
  height: 90vh;
  padding: 10px;
  box-sizing: border-box;

  .mentNav {
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: space-between;

    .navItem {
      height: 100%;
      padding: 10px;
      text-align: center;
      box-sizing: border-box;
      .btn {
        width: 20vw;
        height: 5vh;
        color: white;
        font-size: 25rpx;
        line-height: 5vh;
        border-radius: 50rpx;
        background: linear-gradient(to right, #ec8e36, #fff);

        text {
          font-size: 50rpx;
        }
      }

      .btnText {
        font-size: 30rpx;
        margin: 5% auto;
      }

      .btnCenter {
        background: linear-gradient(to right, #4eade4, #fff);
      }

      .btnRight {
        background: linear-gradient(to right, #e7678d, #fff);
      }
    }
  }

  .main {
    width: 100%;
    height: calc(100% - 12%);
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
